<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form label-width="220px">
      <!--手机 -->

      <el-form-item label="手机">
        <el-input v-model="userInfo.mobile" style="width: 220px" />
      </el-form-item>

      <!-- 工号 入职时间 -->

      <el-form-item label="入职时间">
        <el-date-picker
          v-model="userInfo.timeOfEntry"
          type="date"
          class="inputW"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <!-- 员工照片 -->

      <el-form-item label="员工头像">
        <!-- 放置上传图片
        <img> -->
        <UploadImg
          :staff-photo="userInfo.staffPhoto"
          @uploadSuccess="uploadSuccess"
        />
      </el-form-item>

      <!-- 保存个人信息 -->
      <el-form-item>
        <el-button type="primary" @click="save">保存更新</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { saveUserDetailById } from '@/api/employees.js'
import { getUserDetailById } from '@/api/user'
export default {
  data() {
    return {
      userId: this.$route.query.id,
      userInfo: {
        mobile: '',
        timeOfEntry: ''
      },
      url: ''
    }
  },
  created() {
    this.getInfo(this.$route.query.id)
  },
  methods: {
    async save() {
      //  实现保存更新
      /*
      步骤：
      1-api接口函数
      2-调用接口
      3-成功后
      */

      /*  实现将腾讯云返回的地址存储到自己的服务器中
     1-图片组件  上传成功后需要将图片返回地址给父组件===info.vue
      this.$emit('uploadSuccess', this.imageUrl)
     2-父组件接受传递过来的图片地址  <UploadImg @uploadSuccess="uploadSuccess" />
        uploadSuccess(url) {
          // 图片上传成功的回调
          this.url = url
        }
      3-点击保存更新
          1-api接口函数
          2-调用接口
          3-成功后
     */
      const res = await saveUserDetailById({
        ...this.userInfo,
        id: this.$route.query.id,
        staffPhoto: this.url
      })
      console.log(`res`, res)

      //  实现navBar组件图像更新
      // 这行代码有问题：不管你是谁更改谁的图像，头部的图像始终会随之发生改变
      // 解决问题：分析：只能是你当前用户才能更新头部的头像
      // 解决方法：判断当前页面中更改图像的id和登录进来的用户id是不是同一个，如果是同一个就调用下面的函数，不是就不需要调用
      if (this.$route.query.id === this.$store.state.user.userInfo.userId) {
        //  表示：当前登录人和更改图像是同一个id，需要更新图像
        this.$store.commit('user/SET_AVATAR', this.url)
      }
    },
    uploadSuccess(url) {
      // 图片上传成功的回调
      this.url = url
    },
    // async getInfo(id) {
    //   /*
    //   步骤：
    //   1-获取用户图片信息==需要发送请求
    //   2-将用户信息传递给上传图片组件
    //   3-需要在上传图片组件中监听图片数据变化，获取数据后直接赋值给img

    //   */
    //   const res = await getUserDetailById(id)
    //   console.log(`res123`, res)
    //   this.userInfo = res.data
    // }
  }
}
</script>

<style scoped lang="scss">
.user-info {
  padding-top: 20px;
}
</style>
